<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="./css/bootstrap@5.1.3/bootstrap.min.css" rel="stylesheet">

    <title>首页</title>

    <style>
        .card > a {
            text-decoration: none;
            color: rgb(27, 27, 25);
        }

        .desc_show {
            overflow: hidden;
            -webkit-line-clamp: 3;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    </style>
    <script>
        //发送异步请求
        //import {Alert} from "./js/bootstrap@5.1.3/bootstrap.esm";

        fetch("index.product").then(response=>response.json()).then(data=>{
            if (data.flag) {
                let recommendList=data.data['1'];
                let bannerList=data.data['2'];
                let newList=data.data['0'];
                //调用轮播图函数
                loadBanner(bannerList);
                //调用推荐商品函数
                loadRecommendProduct(recommendList);
                //调用最新商品函数
                loadNewProduct(newList);
                //console.log(newList);
                console.log(recommendList);
            }
        });

        //轮播图处理
        let loadBanner=(bannerList)=>{
            //获得id为banner_images的dom对象
            let bannerImagesDiv = document.getElementById("banner_images");
            let imageList='';
            bannerList.forEach((e, index) => {
                let active = index == 0 ? 'active' : '';
                imageList +=
                    `<div class="carousel-item ${active}">
                        <a href="product.html?pid=${e.pid}">
                            <img src="${e.pic}" class="d-block w-100">
                        </a>
                     </div>`;
            });
            bannerImagesDiv.innerHTML = imageList;
        }

        //推荐商品处理
        let loadRecommendProduct=(recommendList)=>{
            //采用选择器的方式获得元素
            let recommendDiv = document.querySelector('#recommendDiv');
            let recommendStr = '';
            //处理推荐商品循环
            recommendList.forEach((e, index) => {
                recommendStr +=
                                `
                    <div class="col-md-6 col-xl">
                      <div class="card" style="height: 100%">
                        <a href="product.html?pid=${e.pid}">
                          <img src="${e.pimage}" class="card-img-top" >
                          <div class="card-body">
                            <h5 class="card-title text-truncate">${e.name}</h5>
                            <h5 class="card-title">${e.shopPrice}</h5>
                            <p class="card-text desc_show">${e.desc}</p>
                          </div>
                        </a>
                        <div class="card-body">
                          <a  class="card-link">收藏</a>
                          <a  class="addtocar" onclick="jumpCart(${e.pid})">添加购物车</a>
                        </div>
                      </div>
                    </div>
                    `;
            })
            recommendDiv.innerHTML = recommendStr;
        }

        //处理跳转添加购物车
        let jumpCart=function (productId){
            fetch(`add.cart?id=${productId}&qty=1`).then(response=>response.json()).then(data=>{
                if(data.flag){
                    alert(data.message);
                }
            })
        }

        //最新商品处理
        let loadNewProduct=(newList)=>{
            //采用选择器的方式获得元素
            let newDiv = document.querySelector('#newDiv');
            let newStr = '';
            //处理推荐商品循环
            newList.forEach((e, index) => {
                newStr +=
                    `
                        <div class="col-md-6 col-xl">
                          <div class="card" style="height: 100%">
                            <a href="product.html?pid=${e.id}">
                              <img src="${e.pimage}" class="card-img-top" >
                              <div class="card-body">
                                <h5 class="card-title text-truncate">${e.name}</h5>
                                <h5 class="card-title">${e.shopPrice}</h5>
                                <p class="card-text desc_show">${e.desc}</p>
                              </div>
                            </a>
                            <div class="card-body">
                              <a  class="card-link">收藏</a>
                              <a  class="addtocar" onclick="jumpCart(${e.id})">添加购物车</a>
                            </div>
                          </div>
                        </div>
                    `;
            });
            newDiv.innerHTML=newStr;
        }
    </script>
    <script>
        /*//为添加到购物车添加事件
        let addEvenBar=document.getElementsByClassName('addtocar');
        for (let i = 0; i < addEvenBar.length; i++) {
            addEvenBar[i].addEventListener('click',()=>{
                fetch('')
            })
        }*/
    </script>
</head>

<body>
<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
<!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
<script src="./js/bootstrap@5.1.3/bootstrap.bundle.min.js"></script>
<script src="./js/holder.js@2.9.7/holder.js"></script>

<!-- 页面导航 -->
<script src="./js/nav.js"></script>
<!-- /页面导航 -->


<!-- 轮播图 -->
<div class="row justify-content-center mt-1">
    <div class="col-9">
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                        aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                        aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                        aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner" id="banner_images">
                    <!-- 轮播图优化 -->
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
</div>
<!-- /轮播图 -->

<!-- 推荐商品 -->
<div class="row justify-content-center">
    <div class="col-9">
        <h4>推荐商品</h4>
    </div>
</div>
<div class="row justify-content-center">
    <div class="col-9">
        <div class="row" id="recommendDiv">
            <!-- 此处推荐商品优化 -->
        </div>
    </div>

</div>
<!-- /推荐商品 -->


<!-- 最新商品 -->
<div class="row justify-content-center">
    <div class="col-9">
        <h4>最新商品</h4>
    </div>
</div>
<div class="row justify-content-center">
    <div class="col-9">
        <div class="row" id="newDiv">
            <!--此处最新商品优化-->
        </div>
    </div>

</div>

<!-- /最新商品 -->
<script>
       /* //准备数据
        let datas = {
            //轮播图的数据
            bannerList: [{id: 1, pic: 'holder.js/100px300?random=yes&text=Product01'}
                , {id: 2, pic: 'holder.js/100px300?random=yes&text=Product02'}
                , {id: 3, pic: 'holder.js/100px300?random=yes&text=Product03'}],
            //最新商品的数据
            newList: [
                {id: 1, name: '商品名001', price: '$1200', pric: 'holder.js/100px300?random=yes', desc: '基尼太美'}
                , {id: 2, name: '商品名002', price: '$1200', pric: 'holder.js/100px300?random=yes', desc: '基尼太美'}
                , {id: 3, name: '商品名003', price: '$1200', pric: 'holder.js/100px300?random=yes', desc: '基尼太美'}
                , {id: 4, name: '商品名004', price: '$1200', pric: 'holder.js/100px300?random=yes', desc: '基尼太美'}],
            //推荐商品
            topList: [
                {id: 5, name: '商品名005', price: '$1200', pric: 'holder.js/100px300?random=yes', desc: '基尼太美'}
                , {id: 6, name: '商品名006', price: '$1200', pric: 'holder.js/100px300?random=yes', desc: '基尼太美'}
                , {id: 7, name: '商品名007', price: '$1200', pric: 'holder.js/100px300?random=yes', desc: '基尼太美'}
                , {id: 8, name: '商品名008', price: '$1200', pric: 'holder.js/100px300?random=yes', desc: '基尼太美'}]
        }

        //获得id为banner_images的dom对象
        let bannerImagesDiv = document.getElementById("banner_images");
        //采用选择器的方式获得元素
        let recommendDiv = document.querySelector('#recommendDiv');
        //获得轮播图数据
        let bannerData = datas.bannerList;
        let imageList = '';
        //获得推荐商品数据
        let recommendList = datas.topList;
        let recommendStr = '';
        //处理轮播图循环
        bannerData.forEach((e, index) => {
            let active = index == 0 ? 'active' : '';
            imageList += `<div class="carousel-item ${active}">
                       <img src="${e.pic}" class="d-block w-100" alt="...">
                    </div>`;
        });
        bannerImagesDiv.innerHTML = imageList;*/

/*        //处理推荐商品循环
        recommendList.forEach((e, index) => {
            recommendStr +=
                `
        <div class="col-md-6 col-xl">
          <div class="card">
            <a href="product.html">
              <img src="${e.pric}" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">${e.name} <small>${e.price}</small></h5>
                <p class="card-text desc_show">${e.desc}</p>
              </div>
            </a>
            <div class="card-body">
              <a href="#" class="card-link">收藏</a>
              <a href="#" class="card-link">添加购物车</a>
            </div>
          </div>
        </div>
        `;
        })
        recommendDiv.innerHTML = recommendStr;*/
</script>
</body>

</html>